<template>
  <div class="paper_container" :class="{ is__preview: isPreview }">
    <div class="paper_content">
      <div class="paper-page">
        <div class="sealing" v-show="paperInfo.showSealing">
          <img src="/src/assets/test-paper/sealing.png" alt="密封线" />
        </div>
        <!-- <div class="cover-map" v-show="paperInfo.showOrgInfo && isBiaopin && isXinzhou">
          <img src="/src/assets/test-paper/logo.png" alt="logo" class="logo" />
          <img src="/src/assets/test-paper/title.png" alt="title" class="title" />
        </div> -->
      </div>
      <div class="paper-page" id="paperMain">
        <div class="paper-footer" v-for="(_, idx) in paperFooterLength" :key="_" :style="{ top: `${(idx + 1) * pageHeight}px` }">第{{ idx + 1 }}页</div>
        <div class="paper-tool-header">
          <h1 v-show="paperInfo.showTitle">
            <input type="text"
              v-model="paperInfo.title"
              placeholder="请输入试卷标题"
              :readonly="isPreview"
              @change="emitter.emit('test-paper-change')"
            />
          </h1>
          <h4 v-show="paperInfo.showTime">
            <span>
              考试时间：
              <el-input-number
                :controls="false"
                :step="1"
                step-strictly
                @change="emitter.emit('test-paper-change')"
                :min="0"
                v-model="paperInfo.useTime"
                size="mini"
                class="paper-time"
              />
              分钟
            </span>
            <span>总分：<i>{{ questionScoreTotal }}</i>分</span
            >
          </h4>
          <h6 v-show="paperInfo.showStuInfo">
            <p><span>姓名：</span><i /></p>
            <p><span>班级：</span><i /></p>
            <p><span>得分：</span><i /></p>
          </h6>
          <!-- <div class="tip">
            <p>注意事项:</p>
            <p>1. 答题前填写好自己的姓名、班级、得分等信息；</p>
            <p>2. 请将答案正确填写在答题卡上。</p>n
          </div> -->
          <div class="paper-score" v-show="paperInfo.showChapterScore">
            <div>
              <el-table :data="paperScoreData" border size="mini" :header-cell-style="{ background: '#fff' }">
                <el-table-column prop="name" label="题号" align="center" width="84" />
                <el-table-column
                  v-for="i in paperInfo.paperCharpts.length"
                  :key="i"
                  :prop="`index${i - 1}`"
                  :label="toChinesNum(i)"
                  align="center"
                  width="60"
                />
                <el-table-column prop="score" label="总分" align="center" width="84" />
              </el-table>
            </div>
          </div>
        </div>
        <div class="paper_main">
          <div class="question_type" v-for="(questionType, idx) in paperInfo.paperCharpts" :key="questionType.id">
            <div class="question-title">
              <div v-show="paperInfo.showScore">
                <div style="display: inline-block">
                  <el-table :data="[{ name: ' ', score: ' ' }]" border size="mini" :header-cell-style="{ background: '#fff' }">
                    <el-table-column label="评卷人" align="center" width="84">
                      <template #default>&nbsp;</template>
                    </el-table-column>
                    <el-table-column prop="score" label="得分" align="center" width="84" />
                  </el-table>
                </div>
              </div>
              <span>{{ toChinesNum(idx + 1) }}、 {{ questionType.title }}（共{{ questionType.questionCount }}小题）（{{ questionType.questions.reduce( (t, n) => (t += n.score || 0), 0) }}）分</span>
              <i class="el-icon-plus" v-if="!isPreview" />
              <div class="footer" v-if="!isPreview">
                <i class="iconfont iconshangyi" :class="{ is__disabled: idx === 0 }" @click="moveType(idx, -1)" />
                <i class="iconfont iconxiayi" :class="{ is__disabled: idx === paperInfo.paperCharpts.length - 1 }" @click="moveType(idx, 1)" />
                <i class="iconfont iconshanchu" :class="{ is__disabled: paperInfo.paperCharpts.length === 1 }" @click="deleteQuestType(questionType.id)" />
              </div>
            </div>
            <draggable
              v-model="questionType.questions"
              @update:modelValue="emitter.emit('test-paper-change')"
              :disabled="isPreview"
              animation="250"
              item-key="questionId"
            >
              <template #item="{ element, index }">
                <div :class="[ 'item', index === currentItem ? currentClassNam : '' ]" :data-uuid="`${idx}-${index}`">
                  <i class="el-icon-plus" v-if="!isPreview" />
                  <div class="title" :data-index="`${element.index}.`">
                    <div v-html="richText(element.question.title)" v-if="(isPreview && classType !== 3) || !isPreview"></div>
                  </div>
                  <div class="content" v-question="element.question" v-if="(isPreview && classType !== 3) || !isPreview"></div>
                  <div class="flex-box" v-if="(isPreview && classType !== 2) || element.showAnswer || answerShow">
                    <div class="label">答案</div>
                    <div class="flex-main" v-html="element.question.rightAnswer ? element.question.rightAnswer.map((a) => a.content).join('、') : '无'"></div>
                  </div>
                  <div class="flex-box" v-if="(isPreview && classType !== 2) || element.showAnswer || answerShow">
                    <div class="label">解析</div>
                    <div class="flex-main" v-html="element.question.analysis"></div>
                  </div>
                  <div v-for="i in element.blankRowCount" style="height: 20px" :key="i"></div>
                  <div class="footer" v-if="!isPreview">
                    <div class="chang-option-number" v-if="element.question.basicQuestionType === 1 || element.question.basicQuestionType === 2">
                      <span>每行排列(个)</span>
                      <div>
                        <img src="../../../assets/test-paper/change-option-dowm.png" alt="" @click="changeOptionOrderDown(element)" />
                        <span class="option-count">{{ element.question.optionNum }}</span>
                        <img src="../../../assets/test-paper/change-option-up.png" @click="changeOptionOrderUp(element)" alt="" />
                      </div>
                    </div>
                    <div>
                      <i class="iconfont iconcharu" />
                      <el-input-number :controls="false" size="mini" :modelValue="element.blankRowCount" @update:modelValue="element.blankRowCount = parseInt($event)" :step="1" :min="0" :max="20" step-strictly @change="emitter.emit('test-paper-change')" />
                      <span>作答区(行)</span>
                    </div>
                    <div>
                      <i class="iconfont iconshezhifenzhi" />
                      <el-input-number
                        :controls="false"
                        size="mini"
                        v-model="element.score"
                        @change="emitter.emit('test-paper-change')"
                      />
                      <span>分值</span>
                    </div>
                    <div @click="element.showAnswer = !element.showAnswer">
                      <i class="iconfont icondaan" />
                      <span>答案</span>
                    </div>
                    <div @click="questExchange(idx, index, element.questionId)">
                      <i class="iconfont iconhuanti" />
                      <span>换题</span>
                    </div>
                    <i class="iconfont iconshangyi" :class="{ is__disabled: index === 0 }" @click="moveQuestion(questionType.id, index, -1)" />
                    <i class="iconfont iconxiayi" :class="{ is__disabled: index === questionType.questions.length - 1 }" @click="moveQuestion(questionType.id, index, 1)" />
                    <i class="iconfont iconshanchu" :class="{ is__disabled: questionType.questions.length === 1 }" @click="deleteQuest(element.questionId)" />
                  </div>
                </div>
              </template>
            </draggable>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Ref, computed, inject, onMounted, ref } from "vue";
import draggable from "vuedraggable";
import store from "./store";
import { toChinesNum } from "./utils";
import $, { emitter, useState, utils } from "$";
import QuestionDirective from "./../../utils/question.directive";
import ExchangeComponent from "./components/exchange.vue";

const exchangeArrayIndex = (arr, index1, index2) => {
  arr[index1] = arr.splice(index2, 1, arr[index1])[0];
  return arr;
};
export default {
  components: { draggable },
  directives: {
    question: QuestionDirective,
  },
  props: {
    // 一对一被授课第三步显示答案解析
    answerShow: {
      type: Boolean,
      default: false,
    }
  },
  setup() {
    let paperInfo: Ref<any> = computed(() => store.state.paperInfo);

    let isPreview = inject("preview");

    let classType = computed(() => store.state.classType);

    let questionScoreTotal = computed(() =>
      paperInfo.value.paperCharpts.reduce((total, n) => {
        n.questions.map((q) => {
          total += q.score || 0;
        });
        return total;
      }, 0)
    );
    let paperScoreData = computed(() => {
      let data = {
        name: '得分',
        ...paperInfo.value.paperCharpts.reduce((obj, _, i) => {
          obj[`index${i}`] = '';
          return obj;
        }, {}),
        score: '',
      };
      return [data];
    });

    const deleteQuestType = (id) => {
      let data = paperInfo.value.paperCharpts.filter( (p: { id }) => p.id !== id );
      store.commit("set_paper_charpts", data);
    };
    const deleteQuest = (questionId) => {
      let data = paperInfo.value.paperCharpts.map(
        (data: { questions: any[] }) => {
          data.questions = data.questions.filter((q: { questionId }) => q.questionId !== questionId);
          return data;
        }
      );
      store.commit("set_paper_charpts", data);
    };
    const moveType = (index, arrow) => {
      store.commit(
        "set_paper_charpts",
        exchangeArrayIndex(
          $.clone(paperInfo.value.paperCharpts),
          index,
          index + arrow
        )
      );
    };
    const moveQuestion = (typeId, index, arrow) => {
      let typeIndex = paperInfo.value.paperCharpts.findIndex(
        (p: { id }) => p.id === typeId
      );
      let data = $.clone(paperInfo.value.paperCharpts);
      data[typeIndex].questions = exchangeArrayIndex(
        data[typeIndex].questions,
        index,
        index + arrow
      );
      store.commit("set_paper_charpts", data);
    };

    const questExchange = (typeIndex, index, id) => {
      $.modal
        .create({
          title: "换题",
          zIndex: 2011,
          component: ExchangeComponent,
          props: { id },
        })
        .then((res: any) => {
          if (res) {
            let data = $.clone(paperInfo.value.paperCharpts);
            data[typeIndex].questions[index].question = res;
            data[typeIndex].questions[index].questionId = res.id;
            store.commit("set_paper_charpts", data);
          }
        });
    };

    let [paperFooterLength, setFooterLength] = useState(0);
    let pageHeight = 860;
    onMounted(() => {
      var target = document.querySelector("#paperMain") as HTMLElement;
      // 创建观察者对象
      var observer = new MutationObserver(
        $.debounce(() => {
          let paperHeight = target.offsetHeight;
          setFooterLength(Math.floor(paperHeight / pageHeight));
        }, 100)
      );
      // 配置观察选项:
      var config = { childList: true, subtree: true };
      observer.observe(target!, config);
    });
    let currentItem = ref();
    let currentClassNam = ref("");
    const setLineItem = (index, className) => {
      currentItem.value = index;
      currentClassNam.value = className;
    };
    const changeOptionOrderUp = async (data) => {
      const arr = [1, 2, 4];
      const index = arr.findIndex((e) => e === data.question.optionNum);
      if (index === 2) data.question.optionNum = arr[0];
      else data.question.optionNum = arr[index + 1];
      editOptionArrangements(data)
    };
    const changeOptionOrderDown = (data) => {
      const arr = [1, 2, 4];
      const index = arr.findIndex((e) => e === data.question.optionNum);
      if (index === 0) data.question.optionNum = arr[2];
      else data.question.optionNum = arr[index - 1];
      editOptionArrangements(data)
    };
    const editOptionArrangements = (data) => {
      $.http
        .json("/tiku/question/editOptionArrangements", {
          id: data.question.id,
          optionArrangements: data.question.optionNum,
        })
        .then((res) => {
          console.log(res);
        });
    };
    return {
      paperInfo,
      questionScoreTotal,
      pageHeight,
      paperFooterLength,
      toChinesNum,
      deleteQuestType,
      deleteQuest,
      moveType,
      moveQuestion,
      paperScoreData,
      classType,
      questExchange,
      isPreview,
      emitter,
      setLineItem,
      currentClassNam,
      currentItem,
      changeOptionOrderUp,
      changeOptionOrderDown,
      isBiaopin: import.meta.env.VITE_SYSTEM_NAME === 'default',
      isXinzhou: import.meta.env.VITE_SYSTEM_NAME !== 'xinzhou',
      richText: (richText) => richText.replace(new RegExp("(i?)(\<img.*?style=['\"])([^\>]+\>)", 'gmi'), '$2max-width:100%;height:auto;$3')
    };
  },
};
</script>

<style lang="scss" scoped>
.paper_container {
  width: 800px;
  height: 100%;
  padding: 30px 0;
  margin: 0 auto;
  .paper_content {
    height: 100%;
    padding: 30px 0;
    background: #fff;
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
    border: 1px solid #eee;
    overflow: auto;
    position: relative;
    .paper-page {
      padding: 0 28px;
    }
    #paperMain {
      position: relative;
      padding-left: 80px;
    }
    .paper-footer {
      width: 100px;
      padding-right: 12px;
      color: #faad14;
      text-align: right;
      border-bottom: dashed 1px #faad14;
      position: absolute;
      right: 0;
    }
    .cover-map {
      overflow: hidden;
      margin: 0 20px 15px;
      .logo {
        width: 120px;
        float: left;
      }
      .title {
        width: 170px;
        float: right;
        margin-top: 17px;
      }
    }
    .sealing {
      position: absolute;
      top: 30px;
      left: 6px;
    }
    h1 input {
      display: block;
      width: calc(100% - 40px);
      margin: 0 20px 15px;
      padding-bottom: 10px;
      font-size: 28px;
      line-height: 40px;
      text-align: center;
      border: 0;
      border-bottom: solid 1px #72b22a;
      outline: none;
    }
    h2 input {
      display: block;
      width: 100%;
      margin: 0 20px 15px;
      padding-bottom: 10px;
      font-size: 20px;
      line-height: 30px;
      text-align: center;
      border: 0;
      outline: none;
    }
    h4 {
      margin: 0 20px 15px;
      color: #303133;
      font-size: 12px;
      line-height: 22px;
      text-align: center;
      border-bottom: solid 1px #dcdfe6;
      span {
        margin: 0 20px;
      }
      :deep(.el-input-number) {
        display: inline-block;
        width: 42px;

        text-align: center;
        outline: none;
        border: 0;
        border-bottom: solid 1px #ccc;
        input {
          border: 0;
          padding: 0;
        }
      }
    }
    h6 {
      margin: 0 20px 15px;
      p {
        display: inline-block;
        height: 20px;
        &:not(:last-child) {
          margin-right: 40px;
        }
        i {
          display: inline-block;
          width: 122px;
          height: 20px;
          border-bottom: solid 1px #000;
        }
      }
    }
    .tip {
      margin: 0 20px;
      color: #303133;
      font-size: 12px;
      line-height: 20px;
      border-bottom: solid 1px #dcdfe6;
    }
    .paper-score {
      margin: 20px auto 0;
      text-align: center;
      & > div {
        display: inline-block;
      }
    }
  }

  .paper_main {
    margin-top: 15px;
  }
  .question_type {
    margin-bottom: 20px;
    .question-title {
      padding: 12px 20px;
      position: relative;
    }
    .question-title,
    .item {
      border: solid 1px transparent;
      border-left-width: 3px;
      border-radius: 4px;
      &:hover {
        border-color: #72b22a;
        .el-icon-plus,
        .footer {
          opacity: 1;
          visibility: visible;
        }
      }
    }
    .item {
      line-height: 1.5;
      padding: 0 20px 0 32px;
      position: relative;
      cursor: move;
      .title {
        display: flex;
        overflow: hidden;
        &::before {
          content: attr(data-index);
          display: block;
          position: absolute;
          top: 0;
          left: 20px;
          transform: translate3d(-100%, 0, 0);
        }
        & > div {
          flex: auto;
        }
      }
      .content {
        overflow: hidden;
      }
    }
    .el-icon-plus {
      display: block;
      width: 24px;
      height: 24px;
      color: #72b22a;
      line-height: 24px;
      text-align: center;
      font-weight: bold;
      background: #fff;
      border-radius: 50%;
      box-shadow: 0 0 4px #ccc;
      border: 1px solid #eeeeee;
      position: absolute;
      top: 0;
      left: 0;
      margin: -13px 0 0 -15px;
      opacity: 0;
      visibility: hidden;
    }
    .flex-box {
      font-size: 13px;
      display: flex;
      margin-bottom: 15px;
      .label {
        display: inline-block;
        height: 20px;
        padding: 0 7px;
        color: #3abab3;
        font-size: 12px;
        line-height: 20px;
        background: rgba(58, 186, 179, 0.15);
        border-radius: 4px;
        margin-right: 8px;
      }
      .flex-main {
        flex: 1 1 32px;
      }
    }
    .footer {
      opacity: 0;
      visibility: hidden;
      width: calc(100% + 2px);
      height: 28px;
      line-height: 24px;
      text-align: right;
      background: #fff;
      box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
      border-radius: 0px 0px 4px 4px;
      border: 1px solid #eee;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 1;
      margin-bottom: -20px;
      margin-left: -2px;
      & > div {
        display: inline-block;
        margin-right: 22px;
        color: #77808d;
        font-size: 12px;
        cursor: pointer;
        &:last-of-type {
          padding-right: 20px;
          height: 16px;
          line-height: 16px;
          border-right: solid 1px #dcdfe7;
        }
      }
      .chang-option-number {
        display: inline-block;
        margin-right: 22px;
        & > div {
          margin-left: 10px;
          padding: 0 6px;
          display: inline-block;
          border-radius: 4px;
          border: 1px solid #a1a1a1;
          .option-count {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #303133;
            margin: 0 15px;
          }
          > img {
            height: 14px;
            width: 14px;
          }
        }
      }
      i {
        color: #faad14;
        font-size: 14px;
        margin-right: 2px;
      }
      & > i {
        font-size: 16px;
        margin-right: 15px;
        cursor: pointer;
        &:last-child {
          font-size: 14px;
          color: #3d7fff;
          margin-right: 25px;
        }
        &.is__disabled {
          color: #999;
          pointer-events: none;
        }
      }
    }
    :deep(.footer) .el-input-number {
      width: 32px;
      input {
        height: 20px;
        padding: 0 5px;
        border-radius: 0;
        border: 0;
        border-bottom: solid 1px #77808d;
      }
    }
  }

  &.is__preview {
    padding: 0;
    .paper_main {
      .question_type {
        .question-title:hover,
        .item:hover {
          border-color: #fff;
        }
      }
    }
  }

  :deep(.item) {
    .e-main {
      display: flex;
      .e-m-cell {
        display: flex;
        &:not(:last-child) {
          margin-bottom: 10px;
        }
        .e-c-label {
          width: 40px;
        }
        .e-c-group {
          flex: 1 1 40px;
          display: flex;
          flex-wrap: wrap;
          .c-t-item {
            flex: 1;
            white-space: nowrap;
          }
        }
      }
      &-title {
        .e-m-cell {
          margin-bottom: 20px;
          .e-c-label {
            margin-bottom: 5px;
          }
          .e-c-group {
            line-height: 24px;
            text-indent: 20px;
          }
        }
      }
    }
  }
  :deep(.item-one) {
    .e-main {
      display: grid !important;
      grid-template: auto / repeat(1, 100%);
    }
  }
  :deep(.item-two) {
    .e-main {
      display: grid !important;
      grid-template: auto / repeat(2, 50%);
    }
  }
  :deep(.item-four) {
    .e-main {
      display: grid !important;
      grid-template: auto / repeat(4, 25%);
    }
  }
}
.set-line-item {
  > span {
    padding: 8px 5px;
    margin-bottom: 8px;
    white-space: nowrap;
    cursor: pointer;
  }
}
</style>
